{include file="/public/header"}
{include file="/public/footer"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="SF_EditForm" lay-filter="SF_EditForm" class="layui-form formBasForm">
                {if $addon.tips}
                <div class="sf-tag layui-badge-{$addon.tips.extend|default='blue'}" style="margin-bottom:10px;">
                    <b>{$addon.tips.title}</b><br>
                    {$addon.tips.value|raw}
                </div>
                {/if}
                {foreach $addon.config as $item}
                <div class="layui-form-item">
                    <label class="layui-form-label">{$item.title}:</label>
                    <div class="layui-input-block">
                    {switch $item.type}
                    {case string}
                        <input {$item.extend} type="text" name="row[{$item.name}]" value="{$item.value|htmlentities}" class="layui-input"
                               lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty} lay-direction="1"/>
                    {/case}
                    {case text}
                        <textarea {$item.extend} name="row[{$item.name}]" class="layui-textarea" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty} row="5">{$item.value|htmlentities}</textarea>
                    {/case}
                    {case array}
                        <div style="white-space:nowrap;overflow: scroll;">
                        <table class="layui-table" id="addField{$item.name}">
                            <tr>
                                <td style="min-width: 100px">
                                    <input type="text" id="key{$item.name}" class="layui-input" lay-tips="请输入键名"/>
                                </td>
                                <td style="min-width: 100px">
                                    <input type="text" id="value{$item.name}" class="layui-input" lay-tips="请输入键值"/>
                                </td>
                                <td>
                                    <a class="layui-btn layui-btn-sm layui-icon layui-icon-add-1" onclick="AddField('{$item.name}')"></a>
                                </td>
                            </tr>
                            {assign name="i" value="0"/}
                            {foreach $item.value as $k => $v}
                            <tr id="tr{$item.name}{$i}">
                            <td style="min-width: 100px">
                                <input {$item.extend} type="text" name="row[{$item.name}][{$i}][key]" value="{$k}" class="layui-input" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty} lay-direction="1"/>
                            </td>
                            <td style="min-width: 100px">
                                <input {$item.extend} type="text" name="row[{$item.name}][{$i}][value]" value="{$v}" class="layui-input" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty} lay-direction="1"/>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-delete" onclick="DeleteField('{$item.name}','{$i}')"></a>
                            </td>
                            </tr>
                            {php}$i++{/php}
                            {/foreach}
                        </table>
                        </div>
<!--                        <textarea name="row[{$item.name}]" id="{$item.name}" cols="30" rows="5" class="layui-hide">{$item.value|json_encode}</textarea>-->
                        <script>
                            layui.use(['form'], function () {
                                var $ = layui.jquery;

                                window.DeleteField = function (id, num) {
                                    var tr = $('#tr' + id + num);
                                    tr.remove();

                                }
                                window.AddField = function (id) {
                                    var key = $('#key' + id).val();
                                    var value = $('#value' + id).val();
                                    var length = new Date().valueOf();
                                    if (key == '') {
                                        notice.msg('请填写键名！', {icon: 2});
                                        return false;
                                    }
                                    if (value == '') {
                                        notice.msg('请填写键值！', {icon: 2});
                                        return false;
                                    }
                                    $('#addField' + id).append('<tr id="tr' + id + length + '"><td><input type="text" name="row[' + id + '][' + length + '][key]" value="' + key + '" class="layui-input"/></td><td><input type="text" name="row[' + id + '][' + length + '][value]" value="' + value + '" class="layui-input"/></td><td><a class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-delete" onclick="DeleteField(\'' + id + '\',\'' + length + '\')"></a></td></tr>');
                                    $('#key' + id).val('');
                                    $('#value' + id).val('');
                                }
                            });
                        </script>
                    {/case}
                    {case date}
                        <input {$item.extend} id="date{$item.name}" type="text" name="row[{$item.name}]" value="{$item.value|htmlentities}" class="layui-input"
                               lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}/>
                        <script>
                            layui.use(['laydate'], function () {
                                var $ = layui.jquery;
                                var laydate = layui.laydate;
                                laydate.render({
                                    elem: '#date{$item.name}',
                                    mark: {
                                        '0-3-15': 'SF'
                                    },
                                    type: 'date',
                                    trigger: 'click'
                                });
                            });
                        </script>
                    {/case}
                    {case time}
                        <input {$item.extend} id="time{$item.name}" type="text" name="row[{$item.name}]" value="{$item.value|htmlentities}" class="layui-input"
                               lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}/>
                        <script>
                            layui.use(['laydate'], function () {
                                var $ = layui.jquery;
                                var laydate = layui.laydate;
                                laydate.render({
                                    elem: '#time{$item.name}',
                                    mark: {
                                        '0-3-15': 'SF'
                                    },
                                    type: 'time',
                                    trigger: 'click'
                                });
                            });
                        </script>
                    {/case}
                    {case datetime}
                        <input {$item.extend} id="datetime{$item.name}" type="text" name="row[{$item.name}]" value="{$item.value|htmlentities}" class="layui-input"
                               lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}/>
                        <script>
                            layui.use(['laydate'], function () {
                                var $ = layui.jquery;
                                var laydate = layui.laydate;
                                laydate.render({
                                    elem: '#datetime{$item.name}',
                                    mark: {
                                        '0-3-15': 'SF'
                                    },
                                    type: 'datetime',
                                    trigger: 'click'
                                });
                            });
                        </script>
                    {/case}
                    {case number}
                        <input {$item.extend} type="number" name="row[{$item.name}]" value="{$item.value|htmlentities}" class="layui-input"
                               lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}/>
                    {/case}
                    {case checkbox}
                    {foreach name="item.content" item="vo" key="key"}
                        <input type="checkbox" name="row[{$item.name}]" value="{$key}" title="{$vo}" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty} {in name="key" value="$item.value"}checked{/in}>
                    {/foreach}
                    {/case}
                    {case radio}
                    {foreach name="item.content" item="vo" key="key"}
                        <input type="radio" name="row[{$item.name}]" value="{$key}" title="{$vo}" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty} {in name="key" value="$item.value"}checked{/in}>
                    {/foreach}
                    {/case}
                    {case value="select"}
                        <select {$item.extend} class="layui-input" name="row[{$item.name}]" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}>
                        {foreach name="item.content" item="vo" key="key"}
                            <option value="{$key}" {in name="key" value="$item.value" }selected{/in}>{$vo}</option>
                        {/foreach}
                        </select>
                    {/case}
                    {case value="image"}
                        <input {$item.extend} type="text" class="layui-input" name="row[{$item.name}]" value="{$item.value|htmlentities}" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}>
                        <div class="layui-form-item">
                            <div class="layui-upload-drag" id="image{$item.name}">
                                <i class="layui-icon layui-icon-upload-drag" style="color:#2d8cf0;"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                                <div class="layui-hide" id="uploadImage{$item.name}">
                                    <hr>
                                    <img src="" alt="上传成功后渲染" id="img{$item.name}" style="max-width: 196px">
                                </div>
                            </div>
                        </div>
                        <script>
                            layui.use(['upload','notice'], function () {
                                var $ = layui.jquery;
                                var upload = layui.upload;
                                var notice = layui.notice;

                                upload.render({
                                    elem: '#image{$item.name}'
                                    ,url: '{:url("/Upload/image")}'
                                    ,before: function(obj){
                                        //预读本地文件示例，不支持ie8
                                        obj.preview(function(index, file, result){
                                            $('#img{$item.name}').attr('src', result); //图片链接（base64）
                                        });
                                        notice.msg('上传中...', {icon: 4, close: true});
                                    }
                                    ,done: function(res){
                                        notice.destroy();
                                        if(res.code == 0){
                                            notice.msg('上传成功！', {icon: 1, audio:'1'});
                                            $("input[name='row[{$item.name}]']").val(res.data.path);
                                            layui.$('#uploadImage{$item.name}').removeClass('layui-hide').find('img').attr('src', res.files.file);
                                        }else{
                                            notice.msg('上传失败！', {icon: 2, audio:'1'});
                                        }
                                    }
                                });
                            });
                        </script>
                    {/case}
                    {case value="file"}
                        <style>
                            .mask{position:fixed;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.8;filter:alpha(Opacity=80);-moz-opacity:0.8;z-index:999;display:none;}
                            .loading{position:fixed;width:300px;left:50%;margin-left:-150px;top:200px;height:18px;border-radius:10px;background:#fff;z-index:9999;overflow:hidden;display:none;}
                        </style>
                        <input {$item.extend} type="text" class="layui-input" name="row[{$item.name}]" value="{$item.value|htmlentities}" lay-verType="tips" lay-verify="{$item.rule}" {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}>
                        <div class="layui-form-item text-center">
                            <input type="hidden" id="totalPage" value="0"/>
                            <input type="hidden" id="page" value="1"/>
                            <input type="hidden" id="status" value="0"/>
                            <div class="layui-upload-drag" id="fileUpload{$item.name}">
                                <i class="layui-icon layui-icon-upload-drag" style="color:#2d8cf0;"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                                <div class="layui-hide" id="uploadFile{$item.name}">
                                    <hr>
                                    <div class="layui-form-item">
                                        <img src="" alt="上传成功后渲染" id="fileImg{$item.name}" style="max-width: 196px">
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">文件名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" id="name" value="" lay-verify="title" autocomplete="off" readonly="true" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item text-center">
                            <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="SF_DeleteFile"><i class="layui-icon">&#xe640;</i>删除</button>
                        </div>
                        <div class="mask"></div>
                        <div class="loading">
                            <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress{$item.name}">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>
                        </div>
                        <script>
                            layui.use(['upload', 'notice', 'element'], function () {
                                var $ = layui.jquery;
                                var upload = layui.upload;
                                var notice = layui.notice;
                                var element = layui.element;

                                upload.render({
                                    elem: '#fileUpload{$item.name}',
                                    url: '{$item.upload.upload.url}', //处理上传文件接口
                                    accept: 'file',
                                    auto: false,
                                    acceptMime: '*.*',//允许上传的文件类型
                                    choose: function (obj) {
                                        element.progress('uploadProgress{$item.name}', '0%');
                                        $('.mask').show();
                                        $('.loading').show();
                                        var data = this.data;
                                        var files = obj.pushFile();
                                        var LENGTH = 500 * 1024; //每片文件大小
                                        obj.preview(function (index, file, result) {
                                            var totalSize = file.size;
                                            var totalPage = Math.ceil(totalSize / LENGTH);
                                            $('#totalPage').val(totalPage);
                                            $('#page').val('1');
                                            $('#status').val('1');
                                            var fileName = file.name;
                                            $('#name').val(fileName);
                                            var fileExt = fileName.substr(fileName.lastIndexOf('.') + 1);
                                            fileName = fileName.substr(0, fileName.lastIndexOf('.'));
                                            var progressTimer = setInterval(function () {
                                                var totalPage = parseInt($('#totalPage').val());
                                                var page = parseInt($('#page').val());
                                                var status = $('#status').val();
                                                if (parseInt(totalPage) == parseInt(page) && (parseInt(status) == 2 || parseInt(status) == -1)) {
                                                    clearInterval(progressTimer);
                                                } else {
                                                    if (status == 1) {
                                                        $('#status').val('0');
                                                        data.fileName = fileName;
                                                        data.page = page;
                                                        data.totalPage = totalPage;
                                                        data.fileExt = fileExt;
                                                        obj.upload(index, file.slice((page - 1) * LENGTH, page * LENGTH));
                                                    }
                                                }
                                            }, 100);
                                        });
                                    },
                                    done: function (res) {
                                        if(res.code == 0) {
                                            if (res.data.status == 1) { //分片上传
                                                var page = parseInt($('#page').val());
                                                var totalPage = parseInt($('#totalPage').val());
                                                element.progress('uploadProgress{$item.name}', Math.ceil(page * 100 / totalPage) + '%');
                                                page = page + 1;
                                                console.log(page);
                                                $('#page').val(page);
                                                $('#status').val('1');
                                            } else if (res.data.status == 2) { //上传完成
                                                element.progress('uploadProgress{$item.name}', '100%');
                                                $('#status').val('2');
                                                $('#downUrl').val(res.data.downUrl);
                                                layui.$('#uploadFile{$item.name}').removeClass('layui-hide').find('img').attr('src', '{__MODULE__}fileChoose/img/file.png');
                                                notice.msg('上传成功', {icon: 1,audio: '1',onOpening: function () {
                                                        $('.mask').hide();
                                                        $('.loading').hide();}
                                                });
                                            } else { //上传错误
                                                $('#status').val('-1');
                                                element.progress('uploadProgress{$item.name}', '0%');
                                                console.log(!typeof (res.data.downUrl) == "undefined");
                                                if (typeof (res.data.downUrl) == "undefined") {
                                                } else {
                                                    $('#downUrl').val(res.data.downUrl);
                                                }
                                                notice.msg(res.msg, {icon: 2,audio: '1',onOpening: function () {
                                                        $('.mask').hide();
                                                        $('.loading').hide();}
                                                });
                                            }
                                        }else{
                                            $('#status').val('-1');
                                            element.progress('uploadProgress{$item.name}', '0%');
                                            console.log(!typeof (res.data.downUrl) == "undefined");
                                            if (typeof (res.data.downUrl) == "undefined") {
                                            } else {
                                                $('#downUrl').val(res.data.downUrl);
                                            }
                                            notice.msg(res.msg, {icon: 2,audio: '1',onOpening: function () {
                                                    $('.mask').hide();
                                                    $('.loading').hide();}
                                            });
                                        }
                                    },
                                    error: function(){
                                        notice.msg('服务器错误', {icon: 2,audio: '1',onOpening: function () {
                                                $('.mask').hide();
                                                $('.loading').hide();}
                                        });
                                    }
                                });
                                form.on('submit(SF_DeleteFile{$item.name})', function () {
                                    notice.msg('正在执行中...', {icon: 4, close: true});
                                    $.ajax({
                                        type: "POST",
                                        url: '{$item.upload.delete.url}',
                                        data: {file:$("input[name='row[{$item.name}]']").val()},
                                        dataType: "json",
                                        success: function(data) {
                                            notice.destroy();
                                            if (data.code == 0) {
                                                notice.msg(data.msg, {icon: 1, audio:'1'});
                                                layui.$('#uploadFile{$item.name}').addClass('layui-hide');
                                            } else {
                                                notice.msg(data.msg, {icon: 2, audio:'1'});
                                            }
                                        },
                                        error: function() {
                                            notice.destroy();
                                            notice.msg("服务器错误！", {icon: 2, audio:'1'});
                                        }
                                    });
                                });
                            });
                        </script>
                    {/case}
                    {case bool}
                        <input type="checkbox" name="row[{$item.name}]" value="1" lay-skin="switch" {$item.value?'checked':''} {notempty name="item.tip"}lay-tips="{$item.tip}"{/notempty}/>
                    {/case}
                    {default /}{$item.value}
                    {/switch}
                    </div>
                </div>
                {/foreach}
                <div class="layui-form-item text-right">
                    <button class="layui-btn" lay-filter="SF_EditSubmit" lay-submit>保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'notice'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var notice = layui.notice;

        form.on('submit(SF_EditSubmit)', function (data) {
            notice.msg('正在执行中..', {icon: 4, close: true});
            $.ajax({
                type: "POST",
                url: '{:url("/Addon/config")}?name={$name}',
                data: data.field,
                dataType: "json",
                success: function(data) {
                    notice.destroy();
                    if (data.code == 0) {
                        notice.msg(data.msg, {icon: 1, audio:'1'});
                    } else {
                        notice.msg(data.msg, {icon: 2, audio:'1'});
                    }
                },
                error: function() {
                    notice.destroy();
                    notice.msg("服务器错误！", {icon: 2, audio:'1'});
                }
            });
            return false;
        });

    });
</script>